<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutTeacher}">

<head>
	<meta charset="UTF-8">
	<title>帖子</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<!--<el-button type="primary" @click="openRacePost(null)" style="float: right;">发布新帖子</el-button>-->
				<!--<el-table :data="racePosts" border highlight-current-row style="width: 100%">
					<el-table-column prop="postUserId" label="发布人"></el-table-column>
					<el-table-column prop="postText" label="内容"></el-table-column>
					<el-table-column prop="postTime" label="发布时间"></el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openRacePost(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delRacePost(scope.row.postId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>-->
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12" :offset="6">
				<el-form :model="racePostForm" :rules="racePostRules" ref="racePostForm" label-width="100px" label-position="top">
					<!-- -->
					<!--<el-form-item label="发布人" prop="postUserId">
						<el-input v-model="racePostForm.postUserId"></el-input>
					</el-form-item>-->
					<el-form-item label="发布帖子" prop="postText">
						<el-input v-model="racePostForm.postText" type="textarea"
							:autosize="{ minRows: 5, maxRows: 10}"></el-input>
					</el-form-item>
					<el-form-item style="margin-bottom: 12px;">
						 <el-button type="primary" @click="saveRacePost" style="float: right;">确认发布</el-button>
					</el-form-item>
					<!--<el-form-item label="发布时间" prop="postTime">
						<el-input v-model="racePostForm.postTime"></el-input>
					</el-form-item>-->
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<!--<el-col :span="4" v-for="post in racePosts" :key="post.postId" style="height:300px; border: 1px solid #e1e1e1;">
			{{post.postText}}
			</el-col>-->
			<el-col :span="12" :offset="6">
				<el-tabs v-model="activeTab" @tab-click="handleTabClick">
			    <el-tab-pane label="交流中心" name="center"></el-tab-pane>
			    <el-tab-pane label="我的发布" name="my"></el-tab-pane>
			  </el-tabs>
				<div class="card shadow p-2 mb-3" v-for="post in racePosts" :key="post.postId">
					<div class="row g-0">
						<div class="col-md-12">
							<div class="card-body py-md-2 d-flex flex-column h-100 position-relative">
								<!--<div class="d-flex justify-content-between align-items-center">
									<ul class="list-inline mb-0">
									</ul>
									<ul class="list-inline mb-0 z-index-2" v-if="userId === post.postUserId" >
										<li class="list-inline-item">
											<el-button  size="small" plain type="warning" icon="el-icon-edit" @click="openRacePost(post)"></el-button>
										</li>
										<li class="list-inline-item">
											<el-popconfirm title="是否删除？" @confirm="delRacePost(post.postId)">
												<el-button slot="reference"  size="small" plain type="danger" icon="el-icon-delete"></el-button>
											</el-popconfirm>
										</li>
									</ul>
								</div>-->
								<!-- Amenities -->
								<ul class="nav nav-divider mt-3">
									<li class="nav-item">{{post.postUser.accountName}}</li>
									<li class="nav-item">{{post.postTime}}</li>
								</ul>
								<!-- Title -->
								<p class="card-title mb-1">{{post.postText}}</p>

								<!-- List -->
								<ul class="list-group list-group-borderless small mb-0 mt-2"
								 v-if="post.comments !== null && post.comments.length > 0">
									<h6>评论列表</h6>
									<li class="list-group-item d-flex p-0" v-for="comment in post.comments" :key="comment.commentId">
										<b>{{comment.user.accountName}}：</b>{{comment.commentText}}
									</li>
								</ul>

								<!-- Price and Button -->
								<div class="d-sm-flex justify-content-sm-between align-items-center mt-3 mt-md-auto">
									<!-- Button -->
									<div class="d-flex align-items-center">
									</div>
									<!-- Price -->
									<div class="mt-3 mt-sm-0">
										<el-button  v-if="userId === post.postUserId" size="mini" plain type="warning" icon="el-icon-edit" @click="openRacePost(post)"></el-button>
										<el-popconfirm  v-if="userId === post.postUserId" title="是否删除？" @confirm="delRacePost(post.postId)">
											<el-button slot="reference"  size="mini" plain type="danger" icon="el-icon-delete"></el-button>
										</el-popconfirm>
										<el-button  size="mini" plain type="primary" @click="openRaceComment(post.postId, 0)">评论</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="racePostForm.ttitle" :visible.sync="racePostForm.visible" width="30%">
			<el-form :model="racePostForm" :rules="racePostRules" ref="racePostForm" label-width="100px">
				<!-- -->
				<!--<el-form-item label="发布人" prop="postUserId">
					<el-input v-model="racePostForm.postUserId"></el-input>
				</el-form-item>-->
				<el-form-item label="内容" prop="postText">
					<el-input v-model="racePostForm.postText" type="textarea"
						:autosize="{ minRows: 5, maxRows: 10}"></el-input>
				</el-form-item>
				<!--<el-form-item label="发布时间" prop="postTime">
					<el-input v-model="racePostForm.postTime"></el-input>
				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeRacePost">取 消</el-button>
				<el-button type="primary" @click="saveRacePost">保 存</el-button>
			</span>
		</el-dialog>
		<!--弹框-->
		<el-dialog title="评论帖子" :visible.sync="raceCommentForm.visible" width="30%">
			<el-form :model="raceCommentForm" :rules="raceCommentRules" ref="raceCommentForm" label-width="100px">
				<el-form-item label="内容" prop="commentText">
					<el-input v-model="raceCommentForm.commentText"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeRaceComment">取 消</el-button>
				<el-button type="primary" @click="saveRaceComment">提交</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		userId: '[[${session.user.accountId}]]',
		activeTab:'center',
		racePosts: [],
		selectRacePost: null,
		racePostForm: {
			visible: false,
			ttitle: '新增/修改',
			postId: '',
			postUserId: '',
			postText: '',
			postTime: '',
		},
		racePostQuery: {
			userId: 'not',
			page: '',
			size: '',
		},
		racePostRules: {
			postId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			postUserId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			postText: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			postTime: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
		},
		raceCommentForm: {
			visible: false,
			commentId : '',
			commentText : ''
		},
		raceCommentRules: {
			commentText: [
				{required: true, message: '不能为空', trigger: 'blur'}
			]
		},
	}
	let vueMethods = {
		getRacePosts() {
			let that = this
			postRequst('/getPosts', that.racePostQuery, true).then(function (resp) {
				that.racePosts = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectRacePost = resp.rows[0]
				}
			})
		},
		openRacePost(row) {
			let that = this
			if (row) {
				that.racePostForm.ttitle = '修改'
				that.racePostForm.postId = row.postId
				that.racePostForm.postUserId = row.postUserId
				that.racePostForm.postText = row.postText
				//that.racePostForm.postTime = row.postTime
			} else {
				that.racePostForm.ttitle = '新增'
				that.racePostForm.postId = ''
				that.racePostForm.postUserId = ''
				that.racePostForm.postText = ''
				//that.racePostForm.postTime = ''
			}
			that.racePostForm.visible = true
		},
		closeRacePost() {
			this.$refs["racePostForm"].resetFields();
			this.racePostForm.visible = false
			this.racePostForm.postText = ''
		},
		openRaceComment(commentPostId, commentParentId) {
			let that = this
			that.raceCommentForm.commentParentId = commentParentId
			that.raceCommentForm.commentPostId = commentPostId
			that.raceCommentForm.commentText = ''
			that.raceCommentForm.visible = true
		},
		closeRaceComment() {
			this.$refs["raceCommentForm"].resetFields();
			this.raceCommentForm.visible = false
		},
		saveRacePost() {
			let that = this
			this.$refs["racePostForm"].validate((valid) => {
				if (valid) {
					var url = '/createPost'
					if (that.racePostForm.postId) {
						url = '/upodatePost'
					}
					postRequst(url, that.racePostForm, true).then(function (resp) {
						if (resp.status == 0) {
							that.getRacePosts()
							that.racePostForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delRacePost(postId) {
			let that = this
			postRequst('/delPost', {postId: postId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getRacePosts()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		saveRaceComment() {
			let that = this
			this.$refs["raceCommentForm"].validate((valid) => {
				if (valid) {
					postRequst('/addComment', that.raceCommentForm, true).then(function (resp) {
						if (resp.status == 0) {
							that.getRacePosts()
							that.raceCommentForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delRaceComment(commentId) {
			let that = this
			postRequst('/delComment', {commentId: commentId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getRacePosts()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		handleTabClick(tab, event){
			let that = this
			if(that.activeTab === 'center'){
				that.racePostQuery.userId = 'not'
			}else{
				that.racePostQuery.userId = ''
			}
			that.getRacePosts()
		}
	}
	function vueCreated() {
		let that = this
		that.getRacePosts()
	}
</script>

</html>